<style type="text/css">
.ui-dialog .ui-dialog-footer{
	border-top:0px!important;
}
.ui-button{
	background: #E54C2A!important;
}
</style>
<p-dialog [(visible)]="display" [contentStyle]="{'min-width':'400px','overflow':'hidden','min-height':'200px'}">
  <p-header>
    <div style="width:86%; top:10px; height:40px; position:absolute;text-align: center;">{{'Password Reset'|translate}}</div>
  </p-header>
  <div *ngIf="newPassword1 !== newPassword2">
    <div class="alert alert-danger" role="alert">
     {{'password not matched!'| translate}} 
    </div>
  </div>
  <div class="row" style="padding-left:20px; margin-top:25px;">
    <!--<div class="col-md-4">{{'NEW PASSWORD'|translate}}</div>-->
    <div class="col-md-12"><input type="password" style="width:94%" pPassword [(ngModel)]="newPassword1" placeholder="new password" /></div>
    
   </div>
  <div class="row" style="padding-left:20px; margin-top:25px;">
      <!--<div class="col-md-4">{{'REPEAT'|translate}}</div>-->
      <div class="col-md-12"><input type="password" style="width:94%" pPassword [(ngModel)]="newPassword2" placeholder="confirm password" /></div>
    
  </div>
  <div class="row" style="padding-left:43%; margin-top:35px;">
  <p-button label="RESET" (onClick)="resetPassword()" iconPos="left" *ngIf="newPassword1 !== ''" ></p-button>
  </div>
  
</p-dialog>

<style type="text/css">
.nav-item{
	margin-left:10px;	
}
</style>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-shrink navbar-white" id="mainNav">
  <div class="container">
    <a class="navbar-brand" rel="home" href="#" title="iPAN">
      <img style="max-width:100px; margin-top: 1 px;" src="/assets/img/defaultLogo.png">
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
      aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      {{'Menu'|translate}}
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav  ml-auto">
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['propertylists']">{{'FIND LISTINGS' | translate}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['agent-guide/content/user_guide']">{{'MEMBER\'S HELP'|translate}}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [routerLink]="['shared/agent-sales-record',user.id]">{{'MY CLIENT RECORD'|translate}}</a>
        </li>
        <!-- <li class="nav-item">
          <a class="nav-link" [routerLink]="['shared/agent-property-management',user.id]">{{'MY PROPERTY MANAGEMENT'|translate}}</a>
        </li> -->
        <li *ngIf="user.code[0] ==='i'" class="nav-item">
          <a class="nav-link" [routerLink]="['shared/membership',user.code]">{{'MY TEAM'|translate}}</a>
        </li>
        <li class="nav-item dropdown" ngbDropdown>
          <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
              <i class="fa fa-language"></i> {{ 'Language' | translate }}
              <b class="caret"></b>
          </a>
          <div class="dropdown-menu-right" ngbDropdownMenu>
              <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('en')">
                  <span class="flag-icon flag-icon-au"></span>English
              </a>
              <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('zh')">
                  <span class="flag-icon flag-icon-cn"></span>中文
              </a>
          </div>
      </li> 
        <li class="nav-item dropdown" ngbDropdown>
          <a href="javascript:void(0)" class="nav-link" style="background:#E54C2A; color:#FFF;" ngbDropdownToggle>
            <i class="fa fa-user" style="margin-right:5px"></i> <span class="font-lower" >{{user.code}}</span> ({{'iPAN Member'|translate}})
            <b class="caret"></b>

          </a>
          <div class="dropdown-menu-right" ngbDropdownMenu>
              <a class="dropdown-item" href="javascript:void(0)" (click)="editProfile()">
                  <i class="fa fa-fw fa-user"></i> {{'PROFILE' |translate }}
                </a>
            <a class="dropdown-item" href="javascript:void(0)" (click)="display=true;">
              <i class="fa fa-fw fa-key"></i> {{'PASSWORD' |translate }}
            </a>
            <a class="dropdown-item" href="javascript:void(0)" (click)="onLoggedout()">
              <i class="fa fa-fw fa-power-off"></i> {{'LOGOUT' |translate}}
            </a>
          </div>
        </li>

      </ul>
    </div>
  </div>
</nav>
<div class="bg_box">
     <div class="banner">
        <img src="/assets/images/login_banner.jpg" alt="" width="100%" class="images3">
        <div style="position:absolute; top:45%; left:44%;font-family: inherit; font-size: -webkit-xxx-large;font-weight: 500;line-height: 1.2; color:#FFF;">{{'iPAN Listings'|translate}}</div>
        <h1 class="text-white " style="padding-top: 50px;"></h1> 
    </div>
</div>

<section class="content-section">
      <router-outlet></router-outlet>
</section>





<!-- Footer -->
<footer style="padding:0px;">
 <div class="bg_hui">{{'Copyright'|translate}} &copy; iPAN 2018. All rights reserved.</div>
</footer>